// ref 的函数表示形式
import React, { Component } from 'react'
export default class RefCom extends Component {
  // 1. 创建实例的属性
  input = React.createRef(); //createRef 返回值是一个对象
  div = React.createRef();

  // 声明 show 方法
  show = () => {
    // 3. 获取真实 DOM 对象
    let v = this.input.current.value;
    // 设置 div 的文本
    this.div.current.innerHTML = v;
  }

  render() {
    return (
      <div>
        {/* 2. 设置元素的 ref 属性 */}
        <input ref={this.input} type="text" /><button onClick={this.show}>显示</button>
        <hr />
        <div ref={this.div}  style={{width: 400, height: 300, border: 'solid 1px #333'}}>123</div>
      </div>
    )
  }
}
